<template>
      <div class="tree-item">
        <div class="tree-item-left">
          <table-checkbox :value="current.key" :checked="current.checked" @on-click="onClick" :key="current.key">{{ current.name }}</table-checkbox>
        </div>
        <div class="tree-item-right">
          <span v-if="!isList">
            <label v-for="c in current.list" :key="c.key">
              <table-checkbox :value="c.key" :checked="c.checked" @on-click="onClick">{{ c.name }}</table-checkbox>
            </label>
          </span>
          <table-item v-else v-for="c in current.list" :item="c" :keys="keys" :key="c.key" @on-click="onClick"></table-item>
        </div>
        <div class="tree-item-clear"></div>
      </div>
</template>
<script>
    import TableCheckbox from './TableCheckBox';

    export default {
        name: 'table-item',
        components: { TableCheckbox },
        props: {
            item: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            keys: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        computed: {
            isList () {
                for (let item of this.item.list) {
                    if (item.list && item.list.length > 0) {
                        return true
                    }
                }
                return false;
            },
            current () {
                const keys = new Set([...this.keys]);
                this.item.checked = keys.has(this.item.key);
                for (let c of this.item.list) {
                    c.checked = keys.has(c.key);
                }
                return this.item;
            }
        },
        methods: {
            onClick (state, value) {
                this.$emit('on-click', state, value);
            }
        }
    }
</script>

<style scoped>
  .tree-item{line-height: 50px; border-bottom: 1px solid #e5e5e5;}
  .tree-item-left{float: left; width: 200px;}
  .tree-item-right{float: right; width: calc(100% - 200px);border-left: 1px solid #e5e5e5;}
  .tree-item-right .tree-item:last-child{border-bottom: 0;}
  .tree-item label{margin-left: 10px; padding: 0; height: 30px; line-height: 30px;}
  .tree-item-clear{clear: both; margin: 0; padding: 0; height: 0;}
</style>
